<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>中英文切换 -- Demo</title>
    <style>
        div,button {
            margin: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="language('zh')">中文</button>
    <button @click="language('en')">英文</button>
    <button @click="language('ja')">日文</button>
    <div v-text="lang.tip"></div>
</div>
</body>
<script src="libs/vue.js"></script>
<script src="libs/lang.js"></script>
<script>
    var vuedata = {
        lang: {}
    };
    var vm = new Vue({
        el: '#app',
        data: vuedata,
        mounted: function() {
            var langType = localStorage.getItem('langType');
            langType = langType ? langType : 'zh';
            this.language(langType);
        },
        methods: {
            language: function (type) {
                if ("undefined" === typeof langResource[type]) {
                    alert('语言未设置');
                } else {
                    this.lang = langResource[type];
                    localStorage.setItem('langType', type);
                }
            },
        }
    });
</script>
</html>